import React from "react";
import { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import './addzh.css'

export default function AddZh() {
  const [name, setname] = useState("");
  const [zhiwei, setzhiwei] = useState("");
  const [danwei, setdanwei] = useState("");
  const [jineng, setjineng] = useState("");
  const [isRenzheng, setisRenzheng] = useState(false);
  const [img, setimg] = useState("");
  const navigate = useNavigate();

  return (
    <div className="medical-form-container">
      <h2 className="medical-form-title"  onClick={()=>{
        navigate('/txl/mywork')
      }}>添加医生信息</h2>
      
      <div className="medical-form-group">
        <label>姓名：</label>
        <input
          type="text"
          value={name}
          onChange={(e) => {
            setname(e.target.value);
          }}
          placeholder="请输入姓名"
        />
      </div>

      <div className="medical-form-group">
        <label>职位：</label>
        <input
          type="text"
          value={zhiwei}
          onChange={(e) => {
            setzhiwei(e.target.value);
          }}
          placeholder="请输入职位"
        />
      </div>

      <div className="medical-form-group">
        <label>单位：</label>
        <input
          type="text"
          value={danwei}
          onChange={(e) => {
            setdanwei(e.target.value);
          }}
          placeholder="请输入单位"
        />
      </div>

      <div className="medical-form-group">
        <label>技能：</label>
        <input
          type="text"
          value={jineng}
          onChange={(e) => {
            setjineng(e.target.value);
          }}
          placeholder="请输入技能特长"
        />
      </div>

      <div className="medical-form-group">
        <label>是否认证：</label>
        <select
          value={isRenzheng}
          onChange={(e) => {
            setisRenzheng(e.target.value === "true" ? true : false);
          }}
        >
          <option value={false}>否</option>
          <option value={true}>是</option>
        </select>
      </div>

      <div className="medical-form-group">
        <label>认证照片：</label>
        <select
          value={img}
          onChange={(e) => {
            setimg(e.target.value);
          }}
        >
          <option value="123">证件照片1</option>
          <option value="1234">证件照片2</option>
        </select>
      </div>

      <button
        className="medical-submit-button"
        onClick={() => {
          let obj = { name, zhiwei, danwei, jineng, isRenzheng, img };
          axios.post("http://localhost:3000/xm/add", obj).then((res) => {
            if (res.data.code === 200) {
              alert("添加成功");
              navigate("/txl");
            } else {
              alert(res.data.message);
            }
          });
        }}
      >
        添加医生
      </button>
    </div>
  );
}